<div>
  <div class="container" id="main-cart-items" data-id="{{ section.id }}">
    <div class="as-cart-with-items {% if settings.enable_fit_viewport %}main-min-height{% endif %} cart-with-items {% if cart.items.size == 0 %}is-empty{% else %}py-section{% endif %}">
    <h1 class="h4 mb-3 mb-md-4">{{ 'sections.cart.title' | t }}</h1>
    {%- liquid
      case settings.color_schema
        when 'accent1'
          assign background_color = 'bg-primary'
          assign text_color = 'text-primary'
        when 'accent2'
          assign background_color = 'bg-secondary'
          assign text_color = 'text-secondary'
        else
          assign background_color = ''
          assign text_color = ''
      endcase
    -%}
    {%- if settings.text != blank -%}
      <div class="main-cart-notification d-flex align-items-center px-3 px-md-4 py-2 alert fs-footnote {{ background_color }} {{ text_color }} mb-4 mb-md-5" role="alert">
        {%- if settings.icon != blank -%}
          <img class="img me-2 align-self-start"
            width="{{ settings.icon.width }}"
            height="{{ settings.icon.height }}"
            src="{{ settings.icon | image_url: width: 24 }}"
            alt="{{ settings.icon.alt | escape }}"
            loading="lazy">
        {%- endif -%}
        <div class="no-last-margin richtext-with-link">{{ settings.text }}</div>
      </div>
    {%- endif -%}

    <form action="{{ routes.cart_url }}" method="post" id="cart" novalidate>
      <div class="{% if template.name == 'cart' %}d-lg-flex justify-content-lg-between{% endif %}">
        <div class="{% if template.name == 'cart' %}flex-grow-1 pe-lg-9{% endif %}">
          {% comment %}List group{% endcomment %}
          <cart-items class="as-cart-items d-block mb-6">
            <div class="position-relative mb-0 mb-md-2 clearfix text-uppercase fs-footnote gray-600">
              <div class="cart-items-img position-relative float-start"></div>
              <div class="cart-items-without-img">
                <div class="row">
                  <div class="col col-md-6 col-lg-5 col-xxl-6">
                    <div class="position-absolute start-0">{{ 'general.cart.product' | t }}</div>
                  </div>
                  <div class="col col-md-6 col-lg-7 col-xxl-6">
                    <div class="d-flex align-items-center justify-content-between">
                      <div><div class="d-none d-md-block">{{ 'general.cart.quantity' | t }}</div></div>
                      <div>{{ 'general.cart.total' | t }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul class="as-cart-items-list list-group list-group-flush border-top">
              {% for item in cart.items %}
              <li class="list-group-item px-0 {% if forloop.last %}pb-0 pt-4 pt-md-6{% else %}py-4 py-md-6{% endif %} bg-transparent clearfix overflow-hidden no-last-margin">
                <div class="">
                  <div class="cart-items-img position-relative float-start">
                    <img width="80" height="{{ 80 | divided_by: item.image.aspect_ratio | ceil }}"
                      loading="lazy"
                      src="{{ item.image | img_url: '80x' }}"
                      srcset="{{ item.image | img_url: '80x' }} 1x, {{ item.image | img_url: '160x' }} 2x, {{ item.image | img_url: '240x' }} 3x"
                      alt="{{ item.image.alt | escape }}"
                      class="img-fluid bg-jasmine">
                    {% comment %}Image{% endcomment %}
                    <a {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} class="stretched-link" href="{{ item.url | within: collections.all }}"></a>
                  </div>
                  <div class="cart-items-without-img">
                    <div class="row">
                      <div class="col col-md-6 col-lg-5 col-xxl-6 no-last-margin">
                        <div class="d-flex justify-content-between">
                          <a class="text-body text-decoration-none" style="max-width: 15rem;" {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ item.url }}">
                            <span class="fw-bold">{{ item.product.title | escape }}</span>
                            {% unless item.variant.title contains 'Default' %}<p class="mb-0 mt-2 small text-muted">{{ item.variant.title | escape }}</p>{% endunless %}
                          </a>
                          <span class="d-block d-md-none ps-2">
                            {%- if item.original_line_price != item.final_line_price -%}
                              <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                              <span class="">{{ item.final_line_price | money }}</span>
                            {%- else -%}
                              <span class="">{{ item.original_line_price | money }}</span>
                            {%- endif -%}
                          </span>
                        </div>
                        {%- comment -%}Cart Item Price{%- endcomment -%}
                        <p class="mt-2 mb-0">
                          {% if item.original_price > item.final_price %}
                          <del class="me-2 gray-600">{{ item.original_price | money }}</del>
                          {% endif %}
                          <span class="text-black">{{ item.final_price | money }}</span>
                        </p>

                        {%- comment -%}Consumer Customized Message{%- endcomment -%}
                        {%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
                          <dl class="mb-0 text-accent small" data-has-only-default-variant="{{ item.product.has_only_default_variant }}" data-properties-size="{{ item.properties.size }}" data-selling-plan-allocation="{{ item.selling_plan_allocation }}">
                            {%- for property in item.properties -%}
                              {%- assign property_first_char = property.first | slice: 0 -%}
                              {%- if property.last != blank and property_first_char != '_' -%}
                                <div class="item-customized-property">
                                  <dt class="d-inline">{{ property.first }}: </dt>
                                  <dd class="d-inline">
                                    {%- if property.last contains '/uploads/' -%}
                                      <a  {% if property.last contains 'https://' %} rel="nofollow" {% endif %} href="{{ property.last }}" target="_blank">
                                        {{ property.last | split: '/' | last }}
                                      </a>
                                    {%- else -%}
                                      {{ property.last }}
                                    {%- endif -%}
                                  </dd>
                                </div>
                              {%- endif -%}
                            {%- endfor -%}
                          </dl>
                          {%- comment -%}Subscriptiont Purchase{%- endcomment -%}
                          <p class="mb-0 text-accent small item-customized-property">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                        {%- endif -%}

                        {% for discount in item.discounts %}
                        <p class="_discount-allocation mb-0 small text-accent">{{ discount.title }}</p>
                        {% endfor %}

                        {%- comment -%}
                        <cart-remove-button id="remove-{{ item.index | plus: 1 }}"
                          class="as-remove-cart-item d-none d-md-inline-block mt-2"
                          data-index="{{ item.index | plus: 1 }}"
                          data-quantity="{{ item.quantity }}">
                          <a href="{{ item.url_to_remove }}" class="small link-muted text-muted" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">{{ 'sections.cart.remove' | t }}</a>
                        </cart-remove-button>
                        {%- endcomment -%}

                      </div>
                      <div class="col-12{% if template.name == 'cart' %} d-md-none{% endif %}">
                        <hr class="my-3 mb-4">
                      </div>
                      <div class="col col-md-6 col-lg-7 col-xxl-6">
                        <div class="d-flex justify-content-between align-items-center align-items-lg-start">
                          <quantity-input class="as-quantity">
                            <div class="input-group flex-nowrap quantity">
                              <button class="quantity-btn as-quantity-btn" type="button" name="minus" {%- if item.quantity <= 1 -%}disabled{%- endif -%} >
                                <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
                                {%- render 'icon-minus' -%}
                              </button>
                              <input type="number"
                                id="quantity-{{ item.index | plus: 1 }}"
                                data-index="{{ item.index | plus: 1 }}"
                                name="updates[]"
                                form="cart"
                                class="as-form-control-number form-control-number form-control text-center bg-transparent"
                                step="1" min="1" value="{{ item.quantity }}">
                                {%- comment -%}Set max on input if there is a metafield{%- endcomment -%}
                              <button class="quantity-btn as-quantity-btn" type="button" name="plus">
                                <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}</span>
                                {%- render 'icon-plus' -%}
                              </button>
                            </div>
                          </quantity-input>
                          <div class="align-items-end d-flex flex-column">
                            <span class="text-end d-none d-md-block ms-2">
                            {%- if item.original_line_price != item.final_line_price -%}
                              <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                              <span class="fs-6">{{ item.final_line_price | money }}</span>
                            {%- else -%}
                              <span class="fs-6">{{ item.original_line_price | money }}</span>
                            {%- endif -%}
                            </span>
                            <cart-remove-button
                              id="remove2-{{ item.index | plus: 1 }}"
                              class="as-remove-cart-item d-block"
                              data-index="{{ item.index | plus: 1 }}"
                              data-quantity="{{ item.quantity }}">
                              <a href="{{ item.url_to_remove }}" class="small link-muted text-muted d-flex mt-md-3 fs-footnote" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
                                {% if settings.icon_style == "garbage_can" %}
                                    {% render 'icon-remove' %}
                                  {% else %}
                                  {{ 'sections.cart.remove' | t }}
                                {% endif %}
                              </a>
                            </cart-remove-button>
                          </div>
                        </div>
                        {%- comment -%}Cart Item Error{%- endcomment -%}
                        <p class="mt-3 mb-0 text-danger fs-footnote d-none" id="line-item-error-{{ item.index | plus: 1 }}" >
                          <span class="d-flex">
                            <span class="me-2 icon-wrap-sm">{% render 'icon-warning' %}</span>
                            <span class="cart-item-error-text"></span>
                          </span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              {% endfor %}
            </ul>
            {%- if settings.show_cart_note -%}
              <div class="border-top d-flex flex-column mt-5 pt-5">
                <label class="fw-bold" for="Cart-note">{{ 'sections.cart.note' | t }}</label>
                <textarea
                  class="form-control px-4 mt-2 rounded-2 small"
                  name="note"
                  form="cart"
                  id="Cart-note"
                  rows="3"
                  placeholder="{{ 'sections.cart.note' | t }}"
                >{{ cart.note }}</textarea>
              </div>
            {%- endif -%}
            <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
            <p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
          </cart-items>
        </div>
        <div class="flex-shrink-0 {% if template.name == 'cart' %}cart-summary{% endif %}">
          <div class="sticky-top mb-md-6" style="z-index: 1000;">
            <div class="p-4 bg-gray-100 rounded-4">
              <div class="no-last-margin">
                <ul class="list-unstyled as-cart-summary">
                  {%- comment -%}Cart Total{%- endcomment -%}
                  {% if cart.original_total_price > cart.total_price %}
                  <li class="d-flex justify-content-between mb-2">
                    <span class="totals-subtotal me-2 small">{{ 'sections.cart.subtotal' | t }}</span>
                    <span class="totals-subtotal-valuems-auto text-nowrap small">{{ cart.original_total_price | money_with_currency }}</span>
                  </li>
                  {% endif %}

                  {%- comment -%}
                    {%- if cart.cart_level_discount_applications.size > 0 -%}
                    {%- for discount in cart.cart_level_discount_applications -%}
                      <li class="discounts-discount d-flex justify-content-between mb-2">
                        <span class="discount-title me-2 small">{{ discount.title }}</span>
                        <span class="ms-auto text-nowrap small">- {{ discount.total_allocated_amount | money_with_currency }}</span>
                      </li>
                    {%- endfor -%}
                    {%- endif -%}
                  {%- endcomment -%}

                  {%- if cart.discount_applications.size > 0 -%}
                  {%- for discount in cart.discount_applications -%}
                    <li class="discounts-discount d-flex justify-content-between mb-2">
                      <span class="discount-title me-2 small">{{ discount.title }}</span>
                      <span class="ms-auto text-nowrap small">- {{ discount.total_allocated_amount | money_with_currency }}</span>
                    </li>
                  {%- endfor -%}
                  {%- endif -%}

                  {%- if cart.original_total_price > cart.total_price or cart.discount_applications.size > 0 -%}
                    <hr class="mb-3 mt-4">
                  {%- endif -%}

                  <li class="d-flex align-items-center justify-content-between fs-4 fw-bold mb-3">
                    <span class="totals-subtotal me-2 mb-0">{{ 'sections.cart.total' | t }}</span>
                    <span class="totals-subtotal-valuems-auto mb-0 fs-6 text-nowrap">{{ cart.total_price | money_with_currency }}</span>
                  </li>
                </ul>
                <hr>
                <small class="gray-600 d-block mt-4">
                  {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                    {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                  {%- elsif cart.taxes_included -%}
                    {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
                  {%- elsif shop.shipping_policy.body != blank -%}
                    {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                  {%- else -%}
                    {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
                  {%- endif -%}
                </small>
              </div>

              <div class="cart-summary-footer mt-4">
                <div class="cart-ctas as-cart-ctas">
                  <noscript>
                    <button type="submit" class="btn btn-outline-primary btn-mw w-100 mb-3 as-btn-cart-update" form="cart">
                      {{ 'sections.cart.update' | t }}
                    </button>
                  </noscript>

                  <button type="submit" onclick="uet_report_conversion();" class="btn btn-primary btn-mw w-100 as-btn-cart-checkout" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
                    {{ 'sections.cart.checkout' | t }}
                  </button>
                </div>

                <script>function uet_report_conversion() {window.uetq = window.uetq || [];window.uetq.push('event', 'begin_checkout',{"revenue_value":{{ cart.total_price | divided_by: 100.0 }},"currency":"USD"});}</script>
                
                {%- if additional_checkout_buttons -%}
                  <div class="cart-dynamic-checkout-buttons additional-checkout-buttons additional-checkout-buttons--vertical additional-checkout-buttons-lg as-additional-checkout-buttons">
                    {{ content_for_additional_checkout_buttons }}
                  </div>
                {%- endif -%}

                <div id="cart-errors" class="small text-danger"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    </div>
    <div class="{% if settings.enable_fit_viewport %}main-min-height{% else %}not-enable-fit-viewport py-9{% endif %} as-empty-cart empty-cart align-items-center justify-content-center">
      <div class="row empty-cart-content">
        <div class="col-12">
          <div class="icon-empty-cart mb-3 mx-auto">
            {% render 'icon-cart' %}
          </div>
          <p class="mb-2 h2 text-center">{{ 'sections.cart.empty' | t }}</p>
          <p class="mb-0 text-center">{{ 'sections.cart.empty_content' | t }}</p>
          <div class="mt-6 text-center">
            <a class="btn btn-outline-primary as-cart-continue-shopping btn-mw"
              {% if settings.continue_shopping_link contains 'https://' %}
                target="_blank" rel="nofollow"
              {% endif %}
              href="{{ settings.continue_shopping_link }}">{{ 'general.cart.continue_shopping' | t }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="{{ 'cart.min.js' | asset_url }}" defer="defer"></script>
